<template>
  <TProTable
    :columns="tableColumns"
    :request="requestFn"
    row-key="id"
    ref="tTableRef"
  >
  <template #search-bottom>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="第一栏" name="first"></el-tab-pane>
      <el-tab-pane label="第二栏" name="second"></el-tab-pane>
    </el-tabs>
  </template>
  </TProTable>
</template>

<script lang="ts" setup>
import { TProTable, TProTableColumn } from '@twa/components'
import { getDate } from './data';
import { ref } from 'vue'
import { TabsPaneContext } from 'element-plus';

const tTableRef = ref()

const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  tTableRef.value.reload()
}

const requestFnWrapper = (fn) => {
  return async (params) => {
    console.log('搜索参数', params)
    const { list, total } = await fn(params)
    return {
      data: list,
      total: total,
    }
  }
}
const requestFn = requestFnWrapper(getDate)

const tableColumns = ref<TProTableColumn[]>([
  {
    label: '商品名称',
    prop: 'productName',
  },
  {
    label: '参考价格',
    hideInSearch: true,
    prop: 'price',
    renderText: ({row}) => {
      return (row.price) / 100 + '元'
    }
  },
  {
    label: '商品规格',
    hideInSearch: true,
    prop: 'skuDesc',
    tableColumnProps:{
      with: 100,
      showOverflowTooltip: true
    }
  },
  {
    label: '品牌',
    prop: 'brandId',
    valueType: 'select',
    valueEnum: [
      { label: '瓜牌', value: '1' },
      { label: '奇趣', value: '2' },
      { label: '穷奇', value: '3' },
      { label: '蒙牛', value: '4' },
    ]
  },
  {
    label: '品类',
    prop: 'categoryId',
    hideInTable: true,
    valueType: 'cascader',
    fieldProps: {
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
            }
          ]
        },
        {
          value: 'guifan',
          label: '规范',
          children: [
            {
              value: 'shejiguifan',
              label: '设计规范',
            }
          ]
        },
      ]
    }
  },
  { 
    label: '创建时间',
    prop: 'createTime',
    paramsRange: ['startCreateTime', 'endCreateTime'],
    valueType: 'dateTimeRange',
  },
])
</script>